<template>
    <section>
            <h2>正在进行<span>{{propTodo.length}}</span></h2>
            <ol id="todolist">
                <li v-for="(item,index) in propTodo" :key="index">
                    <input type="checkbox"
                      @change="changeToDone(index)"
                    >
                    {{item}}
                    <a href="javascript:;" >-</a>
                </li>
            </ol>
            <h2>已近完成<span>{{propDone.length}}</span></h2>
            <ul id="donelist">
                <li style="opacity: .6;"
                  v-for="(item,index) in propDone" :key="index"
                >
                  <input type="checkbox"  checked="checked"
                    @change="changeTodo(index)"
                  >
                  {{item}}
                  <a href="javascript:;" >-</a>
                </li>
            </ul>
        </section>
</template>

<script>
export default {
  props: {
    propTodo: Array,
    propDone: Array
  },
  methods: {
    changeToDone (index) {
      this.$emit('todoChange', index)
    },
    changeTodo (index) {
      this.$emit('doneChange', index)
    }
  }
}
</script>

<style>

</style>
